<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>张伟峰-js-照片墙</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css" >
	<style>
		body{background: #000;}
		ul { width:510px; height:510px; margin:50px auto; }
		li { position:relative; float:left; list-style:none; width:150px; height:150px; margin:10px; }
		img { display:block; width:100%; }
		.active { width:140px; height:140px; border:1px solid red; }
		input { position:absolute; left:100px; top:100px; width:100px; height:30px; }
	</style>
	<script src="../js/base.js"></script>
	<script>
	window.onload=function (){
		var aLi=document.getElementsByTagName('li');
		var zIndex=1;
		
		// 布局转换
		aPos=[];
		for (var i=0; i<aLi.length; i++)
		{
			aPos.push({
				left:aLi[i].offsetLeft,
				top:aLi[i].offsetTop
			});
		}
		
		for (var i=0; i<aLi.length; i++)
		{
			aLi[i].style.position='absolute';
			aLi[i].style.left=aPos[i].left+'px';
			aLi[i].style.top=aPos[i].top+'px';
			aLi[i].style.margin=0;
		}

		// 拖拽
		for (var i=0; i<aLi.length; i++)
		{
			aLi[i].index=i;
			drag(aLi[i]);
		}
		
		function drag(obj)
		{
			obj.onmousedown=function (ev){
				obj.style.zIndex=zIndex++;
				
				var oEvent=ev || event;
				var disX=oEvent.clientX-obj.offsetLeft;
				var disY=oEvent.clientY-obj.offsetTop;
				
				document.onmousemove=function (ev){
					var oEvent=ev || event;
					var left=oEvent.clientX-disX;
					var top=oEvent.clientY-disY;
					
					obj.style.left=left+'px';
					obj.style.top=top+'px';
					
					// 找最近元素
					oNear=findNear(obj);
				
					if (oNear)
					{
						for (var i=0; i<aLi.length; i++)
						{
							aLi[i].className='';
						}
						
						oNear.className='active';
					}
					else
					{
						for (var i=0; i<aLi.length; i++)
						{
							aLi[i].className='';
						}
					}
				};
				
				document.onmouseup=function (){
					document.onmousemove=null;
					document.onmouseup=null;
					
					// 换位置
					if (oNear)
					{
						// 有
						// obj -> oNear
						// oNear -> obj
						move(obj, aPos[oNear.index], {
							duration:300,
							easing:Tween.Elastic.easeOut
						});
						
						move(oNear, aPos[obj.index], {
							duration:300,
							easing:Tween.Elastic.easeOut
						});
						
						// 不光要换位置，还要换下标
						var tmp=obj.index;
						obj.index=oNear.index;
						oNear.index=tmp;
						
						for (var i=0; i<aLi.length; i++)
						{
							aLi[i].className='';
						}
					}
					else
					{
						// 没有
						move(obj, aPos[obj.index], {
							duration:300,
							easing:Tween.Elastic.easeOut
						});
					}
				};
				
				return false;
			};
		}
		
		function findNear(obj)
		{
			var nMin=999999;
			var nMinIndex=-1;
			
			for (var i=0; i<aLi.length; i++)
			{
				if (aLi[i] != obj)
				{
					if (collTest(obj, aLi[i]))
					{
						var dis=getDis(obj, aLi[i]);
						
						if (dis < nMin)    //比较大小  找到最小的那个值 和它的下标
						{
							nMin=dis;
							nMinIndex=i;
						}
					}
				}
			}
			
			if (nMinIndex == -1)  
			{
				return null;
			}
			else
			{
				return aLi[nMinIndex];
			}
		}
		
		function getDis(obj1, obj2)
		{
			var a=obj1.offsetLeft+obj1.offsetWidth/2-(obj2.offsetLeft+obj2.offsetWidth/2);
			var b=obj1.offsetTop+obj1.offsetHeight/2-(obj2.offsetTop+obj2.offsetHeight/2);
			
			return Math.sqrt(a*a+b*b);
		}
		
		
		function collTest(obj1, obj2)
		{
			var l1=obj1.offsetLeft;
			var r1=l1+obj1.offsetWidth;
			var t1=obj1.offsetTop;
			var b1=t1+obj1.offsetHeight;
			
			var t2=obj2.offsetTop;
			var b2=t2+obj2.offsetHeight;
			var l2=obj2.offsetLeft;
			var r2=l2+obj2.offsetWidth;
			
			if (l2>r1 || l1>r2 || t2>b1 || t1>b2)
			{
				return false;
			}
			else
			{
				return true;
			}
		}
	};
</script>
</head>
<body>
	<ul>
		<li><img src="img/1.jpg" /></li>
		<li><img src="img/2.jpg" /></li>
		<li><img src="img/3.jpg" /></li>
		
		<li><img src="img/4.jpg" /></li>
		<li><img src="img/5.jpg" /></li>
		<li><img src="img/6.jpg" /></li>
		
		<li><img src="img/7.jpg" /></li>
		<li><img src="img/8.jpg" /></li>
		<li><img src="img/9.jpg" /></li>
	</ul>
</body>
</html>